<template>
  <el-dialog
    width="100%"
    top="0px"
    :fullscreen="true"
    :title="this.title"
     class="label_font"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="160px">

    <el-row  >
      <el-col :span="12"   >
            <el-form-item label="业务件号" prop="serviceno" class="label_font" >
              <el-input v-model="dataForm.serviceno" placeholder="业务件号"  disabled  style="100%"></el-input>
            </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label=" 不动产登记证明号" prop="realtyno" class="label_font">
            <el-input v-model="dataForm.realtyno" placeholder=" 不动产登记证明号" disabled  style="100%"></el-input>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="注销类型" prop="dyfs" class="label_font">
            <el-select v-model="dataForm.dyfs" placeholder="注销类型" :disabled=true style="width:100%">
             <el-option
                v-for="item in dataForm.cancelTypeList"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="注销原因" prop="zxyy" class="label_font">
            <el-select v-model="dataForm.zxyy" placeholder="注销原因" 
              :disabled="true"  style="width:100%">
             <el-option
                v-for="item in dataForm.cancelReasonList"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="抵押权人名称" prop="dyqrname" class="label_font">
             <el-input v-model="dataForm.dyqrname" placeholder=" 抵押权人名称" disabled  style="100%"></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="主债权担保金额(万元)" prop="bdbzqse" class="label_font">
   <el-input v-model="dataForm.bdbzqse" placeholder=" 主债权担保金额(万元)" disabled  style="100%"></el-input>
          </el-form-item>
      </el-col>
    </el-row>

        <el-row >
      <el-col :span="12">

        <el-form-item label="地市" prop="seRegion">
          <el-select  @change="selectChanged" v-model="dataForm.seRegion" placeholder="地市" style="width:100%"
          :disabled="true"  >
              <el-option
                v-for="item in dataForm.seRegionList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="区县" prop="region">
            <el-select  @change="selectChanged2" v-model="dataForm.region" placeholder="区县" style="width:100%"
            :disabled="true"  >
                <el-option
                  v-for="item in dataForm.regionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>
  

    <el-row>

      <el-col :span="12">
        <el-form-item label="办理点" prop="site" class="label_font">
          <el-select v-model="dataForm.site" placeholder="办理点" style="width:100%" :disabled="true"   >
                <el-option
                  v-for="item in dataForm.siteList"
                  :key="item.siteno"
                  :label="item.sitename"
                  :value="item.siteno">
                </el-option>
            </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="债务人" prop="zwr" class="label_font">
            <el-input v-model="dataForm.zwr" placeholder="债务人" disabled ></el-input>
          </el-form-item>
      </el-col>

    </el-row>    

    <el-row>

      <el-col :span="12">
          <el-form-item label="债务履行开始日期" prop="zwlxqssj" class="label_font">
            <el-date-picker v-model="dataForm.zwlxqssj" placeholder="债务履行开始日期"  disabled  
            type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%" ></el-date-picker>
          </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="债务履行结束日期" prop="zwlxjssj" class="label_font">
            <el-date-picker v-model="dataForm.zwlxjssj" placeholder="债务履行开始日期"  disabled  
            type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%" ></el-date-picker>
          </el-form-item>
      </el-col>

    </el-row>


    <el-row>
      <el-col :span="12">
        <el-form-item label="抵押权人证件类别" prop="dyqrzjlb" class="label_font">
          <el-select v-model="dataForm.dyqrzjlb" placeholder="抵押权人证件类别" style="width:100%" disabled >
                <el-option
                  v-for="item in dataForm.zjlbList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="抵押权人证件号码" prop="dyqrzjhm" class="label_font">
            <el-input v-model="dataForm.dyqrzjhm" placeholder="抵押权人证件号码" disabled></el-input>
          </el-form-item>
      </el-col>
    </el-row>  

    <el-row>
      <el-col :span="12">
        <el-form-item label="询问：是否真实表示" prop="left1" class="label_font">
            <el-radio-group v-model="dataForm.left1"  :disabled="true"  >
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
             </el-radio-group>
        </el-form-item>
      </el-col>

            <el-col :span="12">
        <el-form-item label="询问：是否共有房屋" prop="left2" class="label_font">
            <el-radio-group v-model="dataForm.left2"  :disabled="true"  >
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
             </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>  

    <el-row>
      <el-col :span="12">
        <el-form-item label="状态" prop="state"  >
             <el-input v-model="dataForm.state" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="结果描述" prop="descinfo" class="label_font" >
          <el-input v-model="dataForm.descinfo"  disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row> 

    <el-row>
      <el-col :span="12">

        <el-form-item label="附记" prop="fj" class="label_font">
              <el-input v-model="dataForm.fj" placeholder="附记" disabled  style="width:100%" ></el-input>
        </el-form-item>

      </el-col>
    </el-row>

<el-row >
          <el-col :span="24">

    <el-table
      :data="bdcxxList"
      border
      v-loading="dataListLoading"
      type="index"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">

        <el-table-column
            prop="realtyunitno"
            header-align="center"
            align="center"
            label="不动产单元号">
        </el-table-column>

        <el-table-column
            prop="realtycertno"
            header-align="center"
            align="center"
            label="不动产权证号">

        </el-table-column>
        <el-table-column
            prop="zl"
            header-align="center"
            align="center"
            label="不动产坐落">
        </el-table-column>

        <el-table-column
            prop="mj"
            header-align="center"
            align="center"

            label="面积">
        </el-table-column>



        </el-table>


          </el-col>
        </el-row>
    <el-row >
    <el-col :span="24">

    <el-table
      :data="dyrList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">

        <el-table-column
            prop="MC"
            header-align="center"

            align="center"
            label="抵押人名称">

        </el-table-column>


        <el-table-column
            prop="ZJLB"
            header-align="center"
            align="center"
            label="抵押人证件类别">
        </el-table-column>

        <el-table-column
            prop="ZJHM"
            header-align="center"
            align="center"
            label="抵押人证件号码">
        </el-table-column>

        </el-table>


          </el-col>
        </el-row>


<el-collapse accordion>
  <el-collapse-item>
    <template slot="title"  class="label_font"  >
     <font style="font-size:14px;">文件列表</font>
    </template>

<el-row >
    <el-table
      :data="fileList"
      border
      :header-cell-style="{color:'#333', fontSize:'14px',fontWeight:'bold'}"
      v-loading="dataListLoading"
      style="width: 100%;" >


      <el-table-column
        prop="yxdl"
        header-align="center"
        align="center"
        label="影像大类">
      </el-table-column>
      <el-table-column
        prop="ctype"
        header-align="center"
        align="center"
         width="200px"
        label="影像类别">
      </el-table-column>
      <el-table-column
        prop="fname"
        header-align="center"
        align="center"
        width="500px"
        label="影像文件">
      </el-table-column>
      <el-table-column
        prop="yxbabsm"
        header-align="center"
        align="center"
        label="影像备案标识码">
      </el-table-column>

    </el-table>
    </el-row>


  </el-collapse-item>

</el-collapse>
  

    </el-form>
    <span slot="footer" class="dialog-footer"> 

      <el-button @click="visible = false">关闭</el-button>

    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {


      return {

        visible: false,
        url: '',
        title: '',
     
        dataListLoading: false,
        dyrList: [],
        bdcxxList: [],
        seqno: 0,
        step: 0,


        dataForm: {
          seqno: 0,
          serviceno: '',
          checkresult: 0,
          realtyunitno: '',
          region: '',
          seRegion: '',

          descinfo: '',
          state: '',

          siteList: [],
          zwr: '',
          cancelReasonList: [],
          cancelTypeList:[],
          seRegionList: [],
          regionList:[],
          zjlbList: [],

          dyqrname: '',
          bdbzqse: '',
          dyqrzjhm: '',
          zwlxqssj: '',
          zwlxjssj: '',
          dyqrzjlb: '',
          dyfs: '',

          site: '',

          zxyy: '',

          left1: '',
          left2: '',
          fj: ''

        },
        dataRule: {
          
        }
      }
    },
    methods: {
      init (step, id) {
        this.seqno = id
  
        this.visible = true
        this.dataForm.gettype = '电子证明';
        this.step = step;
        this.title = '显示详情';
        
        this.$http({
          url: this.$http.adornUrl(`/bdc/cancelregist/item/list`),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
                this.dataForm.cancelReasonList = data.cancelReasonList
                this.dataForm.seRegionList = data.regionList
                this.dataForm.cancelTypeList = data.cancelTypeList
                this.dataForm.zjlbList = data.idTypeList
            }
        })

        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
      
            this.dataListLoading = true;

                  var url = this.step == 2 ? '/bdc/cancelregist/info/' : '/bdc/cancelcheck/info/'
                  this.$http({
                  url: this.$http.adornUrl(url + this.seqno),
                  method: 'get',
                  params: this.$http.adornParams()
                }).then(({data}) => {
                  if (data && data.code === 0) {

                  this.dataForm.seRegion = data.bdcMortgregist.seRegion
                  var region = data.bdcMortgregist.region
                  this.selectChanged(this.dataForm.seRegion)
                  this.selectChanged2(region)
                  this.dataForm.region = region

                  this.dataForm.serviceno = data.bdcMortgregist.ydywjh
                  this.dataForm.realtyno = data.bdcMortgregist.ydbdcdjzmh

                  this.dataForm.dyqrname = data.dyqr.MC
                  this.dataForm.bdbzqse = data.bdcMortgregist.bdbzqse
                  this.dataForm.dyqrzjhm = data.dyqr.ZJHM
                  this.dataForm.zwlxqssj = data.bdcMortgregist.zwlxqssj
                  this.dataForm.zwlxjssj = data.bdcMortgregist.zwlxjssj
                  this.dataForm.dyqrzjlb = data.dyqr.ZJLB
                  this.dataForm.dyfs = data.dyfs
                  this.dataForm.site = data.bdcMortgregist.bld

                  this.dyrList = data.dyrList
                  this.bdcxxList = data.bdcxxList
                  this.dataForm.zwr = data.zwr
                  if (data.dyqrXwbl){
                     this.dataForm.left1 = data.dyqrXwbl.SFYYZS
                     this.dataForm.left2 = data.dyqrXwbl.SFGY
                  }

                  this.dataForm.zxyy = data.bdcMortgregist.zxyy
                  this.dataForm.state = data.bdcMortgregist.state
                  this.dataForm.descinfo = data.bdcMortgregist.descinfo
                  this.dataForm.fj = data.bdcMortgregist.fj
                  }
                  this.dataListLoading = false;
                })
            
            
          
        })
      },


      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },

      selectChanged(value){
          this.dataForm.region = '';
          this.$http({
          url: this.$http.adornUrl(`/sys/bdcregion/listByLevle`),
              method: 'get',
              params: this.$http.adornParams({'upregion':value})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.regionList = data.list
            }
        })
      },

      selectChanged2(value){
          this.dataForm.site = ''
          this.$http({
          url: this.$http.adornUrl(`/bdc/bdcsiteinfo/query/` + value),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.siteList = data.siteList
            }
        })
      }
    }
  }
</script>
<style>
.el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #313b50;
    cursor: not-allowed;
}
</style>